<template>
  <div class="home-categories">
    <template v-for="(item, index) in categories" :key="item.id">
      <div class="item" @click="itemClick(index)">
        <img :src="item.pictureUrl" alt="">
        <div class="title" :class="{active: currentIndex === index}">{{ item.title }}</div>
      </div>
    </template>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  import useHomeStore from "@/stores/modules/home"
  import { storeToRefs } from "pinia"

  const HomeStore = useHomeStore()
  const { categories } = storeToRefs(HomeStore)

  // active
  const currentIndex = ref(0)

  const itemClick = (index) => {
    currentIndex.value = index
  }
</script>

<style lang="less" scoped>
  .home-categories {
    margin-top: 20px;
    height: 60px;
    display: flex;
    overflow-x: auto;

    background-color: #fff;

    &::-webkit-scrollbar {
      display: none;
    }

    .item {
      display: flex;
      flex: 1 0 auto;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
      

      img {
        width: 32px;
        height: 32px;
      }

      .title {
        font-size: 12px;
        margin-top: 3px;
        color: #646566;
      }
    }

    .active {
      border-bottom: 3px solid var(--primary-color);
    }
  }
</style>